import type { CommonComponentProps } from '../../interface'
import { useMaterialDrop } from '../../hooks/useMaterialDrop'
export default function Page({ id, name, styles, children }: CommonComponentProps) {


  const { canDrop, dropRef, contextHolder } = useMaterialDrop(['Container', 'Button'], id)

  return (
    <>
      {contextHolder}
      <div
        data-component-id={id}
        ref={dropRef as any}
        className=" p-[20px] h-[100%] box-border"
        style={{ border: canDrop ? '2px solid blue' : 'none',...styles }}
      >
        {children}
      </div>
    </>

  )
}
